<template>
  <div>
    <div style="width: 430px; float: right">
      <el-input v-model="taskItemName"
                placeholder="请输入子任务名称"
                size="small"
                @keyup.enter.native="confirm">
        <i class="el-input__icon el-icon-search"
           slot="prefix"></i>
        <el-button :icon="appendIcon"
                   slot="append"
                   v-on:click="showAdvance = !showAdvance"></el-button>
      </el-input>
    </div>
    <div id="advance"
         style="padding: 10px;float: right"
         v-if="showAdvance">
      <div>
        <div style="width: 100px;display: inline-block;text-align: right">编辑</div>
        <div style="display: inline-block;">
          <el-select v-model="editor"
                     clearable
                     filterable
                     size="small"
                     placeholder="请选择"
                     style="width: 300px">
            <el-option label="未分配"
                       value="null"></el-option>
            <el-option v-for="(item,index) in editorList"
                       :key="index"
                       :label="item.name + ' ' + item.roleNames"
                       :value="item.userName">
            </el-option>
          </el-select>
        </div>
      </div>
      <div style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">初审编辑</div>
        <div style="display: inline-block;">
          <el-select v-model="firstAuditor"
                     clearable
                     filterable
                     size="small"
                     placeholder="请选择"
                     style="width: 300px">
            <el-option label="未分配"
                       value="null"></el-option>
            <el-option v-for="(item,index) in auditorList"
                       :key="index"
                       :label="item.name + ' ' + item.roleNames"
                       :value="item.userName">
            </el-option>
          </el-select>
        </div>
      </div>
      <div style="margin-top: 10px"
           v-if="auditLevel > 1">
        <div style="width: 100px;display: inline-block;text-align: right">复审编辑</div>
        <div style="display: inline-block;">
          <el-select v-model="secondAuditor"
                     clearable
                     filterable
                     size="small"
                     placeholder="请选择"
                     style="width: 300px">
            <el-option label="未分配"
                       value="null"></el-option>
            <el-option v-for="(item,index) in auditorList"
                       :key="index"
                       :label="item.name + ' ' + item.roleNames"
                       :value="item.userName">
            </el-option>
          </el-select>
        </div>
      </div>
      <div style="margin-top: 10px"
           v-if="auditLevel > 2">
        <div style="width: 100px;display: inline-block;text-align: right">终审编辑</div>
        <div style="display: inline-block;">
          <el-select v-model="thirdAuditor"
                     clearable
                     filterable
                     size="small"
                     placeholder="请选择"
                     style="width: 300px">
            <el-option label="未分配"
                       value="null"></el-option>
            <el-option v-for="(item,index) in auditorList"
                       :key="index"
                       :label="item.name + ' ' + item.roleNames"
                       :value="item.userName">
            </el-option>
          </el-select>
        </div>
      </div>
      <div style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">类型</div>
        <div style="display: inline-block;">
          <el-select v-model="type"
                     clearable
                     filterable
                     size="small"
                     placeholder="请选择"
                     style="width: 300px">
            <el-option label="非自建"
                       value="0"></el-option>
            <el-option label="自建"
                       value="1"></el-option>
            <el-option label="修订"
                       value="2"></el-option>
          </el-select>
        </div>
      </div>
      <div style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">状态</div>
        <div style="display: inline-block;">
          <el-select v-model="status"
                     clearable
                     filterable
                     size="small"
                     placeholder="请选择"
                     style="width: 300px">
            <el-option v-for="item in CONST.TASK_ITEM_STATUS"
                       :label="item.key"
                       :key="item.key"
                       :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <div v-if="knowledgeLibId===CONST.QUESTION_AN_LIB_ID" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">关联疾病</div>
        <div style="display: inline-block;">
          <el-input v-model="relationDisease"
                    placeholder="请输入关联疾病"
                    size="small"
                    style="width: 300px" />
        </div>
      </div>
      <div style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">备注</div>
        <div style="display: inline-block;">
          <el-input placeholder="请输入备注"
                    v-model="remark"
                    size="small"
                    style="width: 300px" />
        </div>
      </div>
      <div style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">名称修改意见</div>
        <div style="display: inline-block;">
          <el-switch v-model="nameSuggestionFilterFlag"></el-switch>
        </div>
      </div>

      <el-row style="margin-top: 10px">
        <el-col :span="4"
                :offset="12">
          <el-button size="small"
                     v-on:click="showAdvance = false">取 消</el-button>
        </el-col>
        <el-col :span="4">
          <el-button size="small"
                     v-on:click="reset">重置</el-button>
        </el-col>
        <el-col :span="4">
          <el-button size="small"
                     type="success"
                     v-on:click="confirm">确 定</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
  props: ['auditLevel','knowledgeLibId'],
  data () {
    return {
      showAdvance: false,
      appendIcon: "el-icon-caret-bottom",
      taskItemName: '',
      editor: '',
      firstAuditor: '',
      secondAuditor: '',
      thirdAuditor: '',
      remark: '',
      type: '',
      status: '',
      nameSuggestionFilterFlag: false,
      relationDisease:''
    }
  },
  computed: {
    editorList () {
      return this.$store.state.userList
    },
    auditorList () {
      return this.$store.state.userList
    },
  },
  methods: {
    reset: function () {
      this.editor = ''
      this.firstAuditor = ''
      this.secondAuditor = ''
      this.thirdAuditor = ''
      this.remark = ''
      this.type = ''
      this.status = ''
      this.relationDisease=''
    },
    confirm: function () {
      this.$emit('search', this.taskItemName, this.editor, this.firstAuditor, this.secondAuditor,
        this.thirdAuditor, this.remark, this.type, this.status, this.nameSuggestionFilterFlag,this.relationDisease)
      this.showAdvance = false
    }
  },
  watch: {
    showAdvance (newVal) {
      if (newVal) {
        this.appendIcon = "el-icon-caret-top";
      }
      else {
        this.appendIcon = "el-icon-caret-bottom";
      }
    }
  },
  created() {
    this.nameSuggestionFilterFlag = Boolean(this.$route.query.nameSuggestionFilterFlag)
  }
}
</script>

<style scoped>
</style>
